<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>gl.enchant.js - Sphere Collision</title>
        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
                line-height: 1.5em;
            }
            
            body {
                margin: 0px;
                padding: 0px;
                font-size: 16px;
            }
            
            pre {
                margin: 5px;
                padding: 5px;
                box-shadow: 0px 0px 4px 0px #aaa;
                
                font-family: 'Consolas', 'Monaco', 'ＭＳ ゴシック'
                font-size: 12px;
            }
            
            header {
                margin: 0px;
                padding: 10px 20px;
                background-color: #eee;
                box-shadow: 0px 0px 8px 0px #aaa;
            }
            
            header h1 {
                text-shadow: 2px 2px 4px #aaa;
            }
            
            section {
                margin: 50px 30px;
            }
            
            section > h2 {
                border-left: 1em solid #CCC;
                padding-left: 0.5em;
            }
            
            footer {
                position: absolute;
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 10px 20px;
                background-color: #eee;
                box-shadow: 0px 0px 8px 0px #aaa;
                text-align: center;
            }
            
            th {
                width: 200px;
            }
            
            button {
                padding: 5px 10px;
                width: 100%;
            }
            
        </style>
        <script>
            var $id = function(id) { return document.getElementById(id); };
            
            var openSample = function()
            {
                var url = "sample.html?";
                var params = {
                    fieldSize   : $id("fieldSize").value,
                    sphereMaxNum: $id("sphereMaxNum").value,
                    sphereSize  : $id("sphereSize").value,
                    mode        : $id("mode").value,
                };
                
                var paramStrList = [];
                for (var key in params) {
                    paramStrList.push(
                        key + "=" + params[key]
                    );
                }
                
                window.open(url + paramStrList.join('&'));
            };
        </script>
    </head>
    <body>
        <header>
            <h1>gl.enchant.js - Sphere Collision</h1>
            <p>
                衝突判定サンプルです. クリックするとどっか飛んでいきます.
                debug-camera3d 同様十字キーでカメラを動かすことができます.
            </p>
        </header>
        
        <div>
            <section>
                <h2>Sample</h2>
                <p>
                    サンプルです.
                </p>
                <ul>
                    <li><a href="sample.html">sample 00 - デフォルト</a></li>
                    <li><a href="sample.html?mode=space">sample 01 - 宇宙空間</a></li>
                    <li><a href="sample.html?fieldSize=50&sphereMaxNum=64&sphereSize=2&mode=sp">sample 02 - 沢山ゴロゴロ</a></li>
                </ul>
            </section>
            
            <section>
                <h2>Param Setting Form</h2>
                <p>
                    パラメータを編集して起動できます. 値を設定して Run を押して実行してください.
                </p>
                <table border>
                    <tr>
                        <th>フィールドサイズ: </th>
                        <td>
                            <input id="fieldSize" type="number" value=10 min=5 max=100 step=5 />
                        </td>
                    </tr>
                    <tr>
                        <th>球体の数: </th>
                        <td>
                            <input id="sphereMaxNum" type="number" value=16 min=1 max=100 step=1 />
                        </td>
                    </tr>
                    <tr>
                        <th>球体のサイズ</th>
                        <td>
                            <input id="sphereSize" type="number" value=1 min=0.1 max=10 step=0.1 />
                        </td>
                    </tr>
                    <tr>
                        <th>モード</th>
                        <td>
                            <select id="mode">
                                <option value="">地球</option>
                                <option value="space">宇宙</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: right;">
                            <button onclick="openSample();">Run</button>
                        </td>
                    </tr>
                </table>
            </section>
        </div>
        <footer>
            <p>
                関連エントリは<a href="http://tmlife.net/?p=4770">こちら</a>
            </p>
        </footer>
    </body>
</html>